<template>
  <div class="message-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="title-paper">
        <div class="pin"></div>
        <button
          class="danmaku-toggle-btn card-top"
          @click="toggleDanmaku"
          :title="showDanmaku ? '关闭弹幕' : '开启弹幕'"
          :class="{ 'danmaku-off': !showDanmaku }"
        >
          <span class="toggle-icon" :class="{ active: showDanmaku }">
            <svg
              v-if="showDanmaku"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            <svg
              v-else
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              <line x1="4" y1="20" x2="20" y2="4" stroke-width="2"></line>
            </svg>
          </span>
        </button>
        <h1 class="page-title">留言墙</h1>
        <p class="page-subtitle">在这里贴上你的小纸条 ~</p>
      </div>

      <div class="add-message-container">
        <button class="add-message-btn" @click="toggleMessageForm">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          写留言
        </button>
      </div>
    </div>

    <!-- 弹幕区域 -->
    <div class="danmaku-container" ref="danmakuContainer" v-show="showDanmaku">
      <div
        v-for="danmaku in activeDanmakus"
        :key="danmaku.id"
        class="danmaku-item"
        :style="{
          top: `${danmaku.top}px`,
          color: danmaku.color,
          animationDuration: `${danmaku.duration}s`,
          animationPlayState: danmaku.paused ? 'paused' : 'running',
        }"
        @mouseenter="pauseDanmaku(danmaku)"
        @mouseleave="resumeDanmaku(danmaku)"
      >
        <span class="danmaku-content">{{ danmaku.content }}</span>
        <div class="danmaku-actions" v-show="danmaku.paused">
          <span class="danmaku-action like" @click="likeMessage(danmaku.message)">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
              ></path>
            </svg>
          </span>
          <span class="danmaku-action reply" @click="openReplyPanel(danmaku.message)">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
              ></path>
            </svg>
          </span>
        </div>
      </div>
    </div>

    <!-- 留言墙容器 -->
    <div class="message-wall-container">
      <!-- 左侧翻页按钮 -->
      <button
        class="page-nav-btn prev"
        @click="prevPage"
        :disabled="currentPage === 1"
        :class="{ disabled: currentPage === 1 }"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </button>

      <!-- 留言墙 -->
      <div class="message-wall">
        <transition-group name="fade" tag="div" class="message-grid">
          <div
            v-for="message in paginatedMessages"
            :key="message.id"
            class="sticky-note message-note"
            :class="{ highlighted: message.highlighted }"
            :style="{
              backgroundColor: message.color,
              '--rotation': `${message.rotation}deg`,
            }"
            @click="openReplyPanel(message)"
          >
            <div class="note-tape"></div>
            <div class="note-pin" v-if="message.pinned"></div>
            <div class="note-content">
              <div class="note-header">
                <div class="note-author">{{ message.nickname }}</div>
                <div class="note-date">{{ formatDate(message.timestamp) }}</div>
              </div>
              <div class="note-body">
                {{ message.content }}
              </div>
              <div class="note-footer">
                <div class="note-mood">{{ getMoodIcon(message.mood) }}</div>
                <div class="note-actions">
                  <span
                    @click.stop="likeMessage(message)"
                    class="like-btn"
                    :class="{ liked: message.liked }"
                  >
                    ❤️ {{ message.likes || 0 }}
                  </span>
                  <span @click.stop="openReplyPanel(message)" class="reply-btn"> 💬 回复 </span>
                </div>
              </div>
            </div>
          </div>
        </transition-group>

        <!-- 空状态 -->
        <div v-if="messages.length === 0" class="empty-wall">
          <div class="empty-illustration">
            <i class="empty-icon">📝</i>
          </div>
          <p>墙上还没有便签，来贴第一张吧！</p>
        </div>
      </div>

      <!-- 右侧翻页按钮 -->
      <button
        class="page-nav-btn next"
        @click="nextPage"
        :disabled="currentPage === totalPages"
        :class="{ disabled: currentPage === totalPages }"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </button>
    </div>

    <!-- 页码指示器 -->
    <div class="page-indicator-container">
      <div class="page-indicator">{{ currentPage }} / {{ totalPages }}</div>
    </div>

    <!-- 留言表单弹窗 (无背景) -->
    <transition name="fade">
      <div class="message-form-container" v-show="showMessageForm">
        <div class="sticky-note form-note" :style="{ transform: `rotate(${formRotation}deg)` }">
          <div class="note-tape"></div>
          <div class="form-close-btn" @click="toggleMessageForm">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </div>
          <div class="note-content">
            <div class="note-header">
              <input
                type="text"
                v-model="userInfo.nickname"
                placeholder="你的昵称..."
                maxlength="20"
                ref="nicknameInput"
              />
              <input
                type="email"
                v-model="userInfo.email"
                placeholder="邮箱（选填）..."
                maxlength="50"
              />
            </div>

            <div class="note-body">
              <textarea
                v-model="messageContent"
                placeholder="写下你想说的话..."
                :maxlength="maxContentLength"
              ></textarea>
              <div class="char-counter">{{ messageContent.length }}/{{ maxContentLength }}</div>
            </div>

            <div class="note-footer">
              <div class="mood-selector">
                <span>心情：</span>
                <div class="mood-options">
                  <span
                    v-for="(mood, index) in moods"
                    :key="index"
                    :class="{ active: selectedMood === mood.value }"
                    @click="selectedMood = mood.value"
                  >
                    {{ mood.icon }}
                  </span>
                </div>
              </div>
              <button class="submit-btn" :disabled="isSubmitDisabled" @click="submitMessage">
                贴上便签
              </button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 回复侧边栏 -->
    <transition name="slide-right">
      <div class="reply-sidebar" v-if="showReplySidebar">
        <div class="sidebar-header">
          <h3>回复留言</h3>
          <button class="close-btn" @click="closeReplyPanel">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <div
          class="original-message"
          :style="{ backgroundColor: activeMessage?.color || '#FFF59D' }"
        >
          <div class="note-author">{{ activeMessage?.nickname || '' }}</div>
          <div class="note-content">{{ activeMessage?.content || '' }}</div>
          <div class="note-date">
            {{ activeMessage ? formatDate(activeMessage.timestamp) : '' }}
          </div>
        </div>

        <div class="replies-container" v-if="messageReplies.length > 0">
          <h4>全部回复 ({{ messageReplies.length }})</h4>
          <div class="reply-list">
            <div
              v-for="reply in messageReplies"
              :key="reply.id"
              class="reply-item"
              :style="{ borderLeftColor: reply.color }"
            >
              <div class="reply-author">{{ reply.nickname }}</div>
              <div class="reply-content">{{ reply.content }}</div>
              <div class="reply-footer">
                <span class="reply-date">{{ formatDate(reply.timestamp) }}</span>
                <span class="reply-mood">{{ getMoodIcon(reply.mood) }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="no-replies" v-else>
          <p>还没有回复，快来写第一条吧~</p>
        </div>

        <div class="reply-form">
          <div class="form-header">
            <input type="text" v-model="userInfo.nickname" placeholder="你的昵称" maxlength="20" />
          </div>
          <div class="form-body">
            <textarea
              v-model="replyContent"
              placeholder="写下你的回复..."
              :maxlength="maxContentLength"
              ref="replyTextarea"
            ></textarea>
            <div class="char-counter">{{ replyContent.length }}/{{ maxContentLength }}</div>
          </div>
          <div class="form-footer">
            <div class="mood-selector">
              <span
                v-for="(mood, index) in moods"
                :key="index"
                :class="{ active: selectedMood === mood.value }"
                @click="selectedMood = mood.value"
                :title="mood.value"
              >
                {{ mood.icon }}
              </span>
            </div>
            <button
              class="submit-reply-btn"
              :disabled="!userInfo.nickname.trim() || !replyContent.trim()"
              @click="submitReply"
            >
              发表回复
            </button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 回复侧边栏背景遮罩 -->
    <div class="sidebar-overlay" v-if="showReplySidebar" @click="closeReplyPanel"></div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

/**
 * 弹幕容器引用
 * @type {import('vue').Ref<HTMLElement>}
 */
const danmakuContainer = ref(null)

/**
 * 弹幕显示状态
 * @type {import('vue').Ref<boolean>}
 */
const showDanmaku = ref(true)

/**
 * 切换弹幕显示状态
 */
function toggleDanmaku() {
  showDanmaku.value = !showDanmaku.value

  // 如果关闭弹幕，清空当前所有弹幕
  if (!showDanmaku.value) {
    activeDanmakus.value = []
  } else {
    // 如果开启弹幕，随机发送几条
    setTimeout(() => {
      sendRandomDanmakus(3)
    }, 100)
  }

  // 确保UI状态更新
  setTimeout(() => {
    if (danmakuContainer.value) {
      danmakuContainer.value.style.display = showDanmaku.value ? 'block' : 'none'
    }
  }, 0)
}

/**
 * 随机发送多条弹幕
 * @param {number} count 弹幕数量
 */
function sendRandomDanmakus(count) {
  if (messages.value.length === 0 || !showDanmaku.value) return

  for (let i = 0; i < count; i++) {
    setTimeout(() => {
      const randomIndex = Math.floor(Math.random() * messages.value.length)
      sendToDanmaku(messages.value[randomIndex])
    }, i * 800)
  }
}

/**
 * 回复侧边栏显示状态
 * @type {import('vue').Ref<boolean>}
 */
const showReplySidebar = ref(false)

/**
 * 当前活跃的留言
 * @type {import('vue').Ref<Object>}
 */
const activeMessage = ref(null)

/**
 * 打开回复面板
 * @param {Object} message 要回复的留言
 */
function openReplyPanel(message) {
  // 先取消所有便签的高亮
  messages.value.forEach((m) => {
    m.highlighted = false
  })

  // 设置当前便签高亮
  message.highlighted = true

  // 设置当前活跃留言并显示侧边栏
  activeMessage.value = message
  showReplySidebar.value = true

  // 短暂延迟后聚焦文本框
  setTimeout(() => {
    replyTextarea.value?.focus()
  }, 300)
}

/**
 * 关闭回复面板
 */
function closeReplyPanel() {
  showReplySidebar.value = false

  // 取消当前便签的高亮
  if (activeMessage.value) {
    const currentMessage = messages.value.find((m) => m.id === activeMessage.value.id)
    if (currentMessage) {
      currentMessage.highlighted = false
    }
  }

  setTimeout(() => {
    activeMessage.value = null
    replyContent.value = ''
  }, 300)
}

/**
 * 用户信息
 * @typedef {Object} UserInfo
 * @property {string} nickname - 用户昵称
 * @property {string} email - 用户邮箱（可选）
 */
const userInfo = ref({
  nickname: localStorage.getItem('message_nickname') || '',
  email: localStorage.getItem('message_email') || '',
})

/**
 * 留言表单显示状态
 * @type {import('vue').Ref<boolean>}
 */
const showMessageForm = ref(false)

/**
 * 留言内容
 * @type {import('vue').Ref<string>}
 */
const messageContent = ref('')

/**
 * 文本框焦点状态
 * @type {import('vue').Ref<boolean>}
 */
const textareaFocused = ref(false)

/**
 * 昵称输入框引用
 * @type {import('vue').Ref<HTMLInputElement>}
 */
const nicknameInput = ref(null)

/**
 * 最大留言长度限制
 * @type {number}
 */
const maxContentLength = 100

/**
 * 留言排序方式
 * @type {import('vue').Ref<'latest'|'earliest'>}
 */
const sortOrder = ref('latest')

/**
 * 是否有更多留言
 * @type {import('vue').Ref<boolean>}
 */
const hasMoreMessages = ref(true)

/**
 * 表单便签随机旋转角度
 * @type {number}
 */
const formRotation = Math.floor(Math.random() * 5) - 2

/**
 * 心情选择
 * @type {import('vue').Ref<string>}
 */
const selectedMood = ref('happy')

/**
 * 心情选项
 * @type {Array}
 */
const moods = [
  { icon: '😊', value: 'happy' },
  { icon: '😂', value: 'laugh' },
  { icon: '😍', value: 'love' },
  { icon: '😢', value: 'sad' },
  { icon: '😠', value: 'angry' },
  { icon: '🤔', value: 'think' },
]

/**
 * 提交按钮是否禁用，基于用户昵称和留言内容
 * @type {import('vue').ComputedRef<boolean>}
 */
const isSubmitDisabled = computed(() => {
  return !userInfo.value.nickname.trim() || !messageContent.value.trim()
})

/**
 * 当前页码
 * @type {import('vue').Ref<number>}
 */
const currentPage = ref(1)

const messagesPerPage = ref(9)

function updateMessagesPerPage() {
  if (window.innerWidth <= 768) {
    messagesPerPage.value = 6
  } else {
    messagesPerPage.value = 9
  }
}

const totalPages = computed(() => {
  return Math.ceil(messages.value.length / messagesPerPage.value)
})

const paginatedMessages = computed(() => {
  const start = (currentPage.value - 1) * messagesPerPage.value
  const end = start + messagesPerPage.value
  return sortedMessages.value.slice(start, end)
})

/**
 * 跳转到下一页
 */
function nextPage() {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

/**
 * 跳转到上一页
 */
function prevPage() {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

/**
 * 活跃弹幕列表
 * @type {import('vue').Ref<Array>}
 */
const activeDanmakus = ref([])
let danmakuId = 0
let danmakuTimer = null

/**
 * 发送到弹幕
 * @param {Object} message 留言对象
 */
function sendToDanmaku(message) {
  // 如果弹幕被关闭，不发送
  if (!showDanmaku.value) return

  // 确保弹幕容器存在
  if (!danmakuContainer.value) return

  const containerHeight = danmakuContainer.value.clientHeight || 200
  // 确保弹幕不会超出容器边界
  const safeHeight = containerHeight - 40

  const text =
    message.content.length > 30 ? message.content.substring(0, 30) + '...' : message.content

  const danmaku = {
    id: 'danmaku-' + danmakuId++,
    content: `${message.nickname}: ${text}`,
    top: Math.floor(Math.random() * safeHeight),
    color: message.color,
    duration: 15 + Math.random() * 5, // 15-20秒
    paused: false,
    message: message, // 存储原始消息对象，以便交互时使用
  }

  activeDanmakus.value.push(danmaku)

  // 一段时间后移除弹幕
  setTimeout(
    () => {
      const index = activeDanmakus.value.findIndex((d) => d.id === danmaku.id)
      if (index !== -1) {
        activeDanmakus.value.splice(index, 1)
      }
    },
    danmaku.duration * 1000 + 1000,
  )
}

/**
 * 暂停弹幕滚动
 * @param {Object} danmaku 弹幕对象
 */
function pauseDanmaku(danmaku) {
  danmaku.paused = true
}

/**
 * 恢复弹幕滚动
 * @param {Object} danmaku 弹幕对象
 */
function resumeDanmaku(danmaku) {
  danmaku.paused = false
}

/**
 * 模拟留言数据
 * @type {import('vue').Ref<Array>}
 */
const messages = ref([
  {
    id: 1,
    nickname: '小明',
    content: '这个留言墙太有创意啦！喜欢这种便签风格，很有生活感~',
    timestamp: new Date('2024-04-15T12:30:00').getTime(),
    color: '#ffeb3b',
    rotation: -3,
    likes: 5,
    liked: false,
    pinned: true,
    highlighted: false,
    mood: 'happy',
  },
  {
    id: 2,
    nickname: '花花',
    content: '博主加油！你的博客设计很有趣，期待更多内容！',
    timestamp: new Date('2024-04-16T09:15:00').getTime(),
    color: '#4fc3f7',
    rotation: 2,
    likes: 3,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'love',
  },
  {
    id: 3,
    nickname: '老王',
    content: '第一次看到这样的留言板，太新颖了！弹幕功能很赞👍',
    timestamp: new Date('2024-04-17T16:40:00').getTime(),
    color: '#aed581',
    rotation: -1,
    likes: 2,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'laugh',
  },
  {
    id: 4,
    nickname: '阿猫',
    content: '偶然发现这个博客，界面设计真的很舒服，留个言支持一下~',
    timestamp: new Date('2024-04-14T14:25:00').getTime(),
    color: '#ff8a65',
    rotation: 1,
    likes: 4,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'happy',
  },
  {
    id: 5,
    nickname: '阿狗',
    content: '博主的技术文章写得很清晰，对我帮助很大，谢谢分享！',
    timestamp: new Date('2024-04-13T11:20:00').getTime(),
    color: '#9575cd',
    rotation: -2,
    likes: 6,
    liked: false,
    pinned: true,
    highlighted: false,
    mood: 'love',
  },
  {
    id: 6,
    nickname: '小丽',
    content: '这个留言墙的创意太棒了，喜欢这种可以互动的设计！',
    timestamp: new Date('2024-04-12T18:50:00').getTime(),
    color: '#4db6ac',
    rotation: 2,
    likes: 3,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'laugh',
  },
  {
    id: 7,
    nickname: '大壮',
    content: '博主更新太勤快了，每次都有新收获，继续加油！',
    timestamp: new Date('2024-04-11T10:15:00').getTime(),
    color: '#ffd54f',
    rotation: -1,
    likes: 5,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'happy',
  },
  {
    id: 8,
    nickname: '小鱼',
    content: '偶然发现的宝藏博客，内容质量很高，已经收藏啦~',
    timestamp: new Date('2024-04-10T13:40:00').getTime(),
    color: '#7986cb',
    rotation: 3,
    likes: 7,
    liked: false,
    pinned: true,
    highlighted: false,
    mood: 'love',
  },
  {
    id: 9,
    nickname: '豆豆',
    content: '这个网站的设计真的很用心，每个细节都很精致，给你点赞！',
    timestamp: new Date('2024-04-09T15:30:00').getTime(),
    color: '#81c784',
    rotation: -2,
    likes: 4,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'happy',
  },
  {
    id: 10,
    nickname: '小白',
    content: '第一次留言，希望博主能看到，你的博客给了我很多灵感！',
    timestamp: new Date('2024-04-08T09:20:00').getTime(),
    color: '#f48fb1',
    rotation: 2,
    likes: 3,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'love',
  },
  {
    id: 11,
    nickname: '老李',
    content: '关注你很久了，一直被你的创意所吸引，希望有机会合作！',
    timestamp: new Date('2024-04-07T16:10:00').getTime(),
    color: '#a1887f',
    rotation: -1,
    likes: 5,
    liked: false,
    pinned: false,
    highlighted: false,
    mood: 'think',
  },
  {
    id: 12,
    nickname: '小红',
    content: '博主的文章总是能给我带来新思路，感谢你的分享和付出！',
    timestamp: new Date('2024-04-06T14:35:00').getTime(),
    color: '#90a4ae',
    rotation: 1,
    likes: 6,
    liked: false,
    pinned: true,
    highlighted: false,
    mood: 'happy',
  },
])

/**
 * 根据排序方式得到排序后的留言
 * @type {import('vue').ComputedRef<Array>}
 */
const sortedMessages = computed(() => {
  const sortedList = [...messages.value]

  if (sortOrder.value === 'latest') {
    return sortedList.sort((a, b) => b.timestamp - a.timestamp)
  } else {
    return sortedList.sort((a, b) => a.timestamp - b.timestamp)
  }
})

/**
 * 根据昵称生成头像颜色
 * @param {string} nickname 用户昵称
 * @returns {string} CSS颜色值
 */
function getAvatarColor(nickname) {
  if (!nickname) return 'var(--primary-color)'

  // 生成随机但固定的颜色
  let hash = 0
  for (let i = 0; i < nickname.length; i++) {
    hash = nickname.charCodeAt(i) + ((hash << 5) - hash)
  }

  // 使用预定义的颜色列表，确保颜色美观
  const colors = [
    '#3b82f6',
    '#10b981',
    '#f59e0b',
    '#ef4444',
    '#8b5cf6',
    '#ec4899',
    '#06b6d4',
    '#84cc16',
  ]

  const index = Math.abs(hash) % colors.length
  return colors[index]
}

/**
 * 获取心情图标
 * @param {string} mood 心情
 * @returns {string} 心情图标
 */
function getMoodIcon(mood) {
  const moodItem = moods.find((m) => m.value === mood)
  return moodItem ? moodItem.icon : '😊'
}

/**
 * 格式化日期
 * @param {number} timestamp 时间戳
 * @returns {string} 格式化后的日期字符串
 */
function formatDate(timestamp) {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date // 毫秒差

  // 今天内
  if (
    diff < 24 * 60 * 60 * 1000 &&
    date.getDate() === now.getDate() &&
    date.getMonth() === now.getMonth() &&
    date.getFullYear() === now.getFullYear()
  ) {
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')
    return `今天 ${hours}:${minutes}`
  }

  // 昨天
  const yesterday = new Date(now)
  yesterday.setDate(yesterday.getDate() - 1)
  if (
    date.getDate() === yesterday.getDate() &&
    date.getMonth() === yesterday.getMonth() &&
    date.getFullYear() === yesterday.getFullYear()
  ) {
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')
    return `昨天 ${hours}:${minutes}`
  }

  // 7天内
  if (diff < 7 * 24 * 60 * 60 * 1000) {
    const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六']
    const dayOfWeek = daysOfWeek[date.getDay()]
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')
    return `周${dayOfWeek} ${hours}:${minutes}`
  }

  // 同年
  if (date.getFullYear() === now.getFullYear()) {
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    return `${month}-${day}`
  }

  // 其他情况
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day}`
}

/**
 * 切换留言表单的显示状态
 */
function toggleMessageForm() {
  showMessageForm.value = !showMessageForm.value

  // 如果表单显示，则在短暂延迟后聚焦昵称输入框
  if (showMessageForm.value) {
    setTimeout(() => {
      nicknameInput.value?.focus()
    }, 300)
  }
}

/**
 * 提交留言
 */
function submitMessage() {
  if (isSubmitDisabled.value) return

  // 存储用户信息
  localStorage.setItem('message_nickname', userInfo.value.nickname)
  localStorage.setItem('message_email', userInfo.value.email)

  // 创建新留言
  const newMessage = {
    id: Date.now(),
    nickname: userInfo.value.nickname,
    content: messageContent.value,
    timestamp: Date.now(),
    color: getAvatarColor(userInfo.value.nickname),
    rotation: Math.floor(Math.random() * 6) - 3,
    likes: 0,
    liked: false,
    pinned: Math.random() > 0.8, // 20%概率被钉在墙上
    highlighted: false,
    mood: selectedMood.value,
  }

  // 添加留言
  messages.value.unshift(newMessage)

  // 清空留言内容
  messageContent.value = ''

  // 发送到弹幕
  sendToDanmaku(newMessage)

  // 提交后关闭表单
  showMessageForm.value = false
}

/**
 * 点赞留言
 * @param {Object} message 留言对象
 */
function likeMessage(message) {
  message.liked = !message.liked
  if (message.liked) {
    message.likes = (message.likes || 0) + 1
  } else {
    message.likes = Math.max(0, (message.likes || 1) - 1)
  }
}

/**
 * 初始化留言板
 */
function messageInit() {
  // 初始化弹幕ID和计时器
  danmakuId = 0

  // 清除之前的计时器
  if (danmakuTimer) {
    clearInterval(danmakuTimer)
  }

  // 确保弹幕容器显示
  setTimeout(() => {
    if (danmakuContainer.value && showDanmaku.value) {
      danmakuContainer.value.style.display = 'block'
      // 初始化时发送一些弹幕
      sendRandomDanmakus(5)
    }
  }, 500)

  // 开始自动弹幕
  startAutoDanmaku()
}

/**
 * 自动发送随机弹幕，从当前留言中随机选取
 */
function startAutoDanmaku() {
  // 清除之前的计时器
  if (danmakuTimer) {
    clearInterval(danmakuTimer)
  }

  danmakuTimer = setInterval(() => {
    if (messages.value.length > 0 && showDanmaku.value) {
      // 确保当前有留言存在，并且有一定概率不发送，保持界面清爽
      if (Math.random() > 0.4) {
        // 从现有留言中随机选择一条
        const randomIndex = Math.floor(Math.random() * messages.value.length)
        sendToDanmaku(messages.value[randomIndex])
      }
    }
  }, 4000) // 每4秒尝试发送一次
}

/**
 * 加载更多留言
 */
function loadMoreMessages() {
  setTimeout(() => {
    const oldLength = messages.value.length

    for (let i = 1; i <= 3; i++) {
      const id = Date.now() + i
      messages.value.push({
        id,
        nickname: `游客${id % 1000}`,
        content: `这是第 ${oldLength + i} 张便签，随机内容示例～`,
        timestamp: Date.now() - i * 86400000, // 每条比前一条早一天
        color: getAvatarColor(`游客${id % 1000}`),
        rotation: Math.floor(Math.random() * 6) - 3,
        likes: Math.floor(Math.random() * 5),
        liked: false,
        pinned: Math.random() > 0.8,
        highlighted: false,
        mood: moods[Math.floor(Math.random() * moods.length)].value,
      })
    }

    // 如果已经加载了很多条，模拟没有更多了
    if (messages.value.length > 12) {
      hasMoreMessages.value = false
    }
  }, 500)
}

/**
 * 回复内容
 * @type {import('vue').Ref<string>}
 */
const replyContent = ref('')

/**
 * 回复文本框引用
 * @type {import('vue').Ref<HTMLTextAreaElement>}
 */
const replyTextarea = ref(null)

/**
 * 提交回复
 */
function submitReply() {
  if (!userInfo.value.nickname.trim() || !replyContent.value.trim()) return

  // 存储用户信息
  localStorage.setItem('message_nickname', userInfo.value.nickname)

  // 创建新留言（作为回复）
  const newMessage = {
    id: Date.now(),
    nickname: userInfo.value.nickname,
    content: replyContent.value,
    timestamp: Date.now(),
    color: getAvatarColor(userInfo.value.nickname),
    rotation: Math.floor(Math.random() * 6) - 3,
    likes: 0,
    liked: false,
    pinned: Math.random() > 0.9, // 10%概率被钉在墙上
    highlighted: false,
    mood: selectedMood.value,
    replyTo: activeMessage.value.id,
  }

  // 添加留言
  messages.value.unshift(newMessage)

  // 发送到弹幕
  sendToDanmaku(newMessage)

  // 清空回复内容，但保持侧边栏打开
  replyContent.value = ''
}

/**
 * 根据当前活跃留言获取其回复
 * @type {import('vue').ComputedRef<Array>}
 */
const messageReplies = computed(() => {
  if (!activeMessage.value) return []

  return messages.value
    .filter((msg) => msg.replyTo === activeMessage.value.id)
    .sort((a, b) => a.timestamp - b.timestamp)
})

// 组件挂载时执行
onMounted(() => {
  updateMessagesPerPage()
  window.addEventListener('resize', updateMessagesPerPage)
  messageInit()
  setTimeout(() => {
    if (danmakuContainer.value) {
      danmakuContainer.value.style.display = showDanmaku.value ? 'block' : 'none'
    }
  }, 100)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateMessagesPerPage)
  if (danmakuTimer) {
    clearInterval(danmakuTimer)
    danmakuTimer = null
  }
})
</script>

<style lang="scss" scoped>
/* 页面整体样式 */
.message-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  font-family: 'Indie Flower', 'Ma Shan Zheng', cursive, sans-serif;
  --primary-color: #3eaf7c; /* 修改为正确的主题色 */
  --primary-color-dark: #2c855d;
  --primary-color-rgb: 62, 175, 124;
  --border-color: #e0e0e0;
  --text-color-primary: #333;
  --text-color-secondary: #666;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;

  .title-paper {
    display: inline-block;
    background-color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 3.5rem;
    border-radius: 0.75rem;
    position: relative;
    transform: rotate(-1deg);
    border: 1px solid rgba(0, 0, 0, 0.05);

    .pin {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff5252, #d32f2f);
      box-shadow: 0 3px 8px rgba(211, 47, 47, 0.4);

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
      }
    }

    .page-title {
      margin: 0 0 0.75rem;
      font-size: 2.5rem;
      font-weight: 800;
      color: #333;
      font-family: 'LXGW WenKai', 'Ma Shan Zheng', 'PingFang SC', serif;
      letter-spacing: 0.075em;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .page-subtitle {
      margin: 0;
      font-size: 1.125rem;
      color: #666;
      font-weight: 400;
      font-family: 'LXGW WenKai', 'Ma Shan Zheng', 'PingFang SC', serif;
      letter-spacing: 0.05em;
    }
  }
}

/* 写留言按钮样式 */
.add-message-container {
  margin-top: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;

  .add-message-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white;
    border: none;
    border-radius: 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.3);
    transition: all 0.3s ease;
    font-family: 'LXGW WenKai', 'Ma Shan Zheng', sans-serif;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
      transform: translateY(-100%);
      transition: transform 0.3s ease;
    }

    svg {
      margin-right: 0.5rem;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.4);

      &::before {
        transform: translateY(0);
      }
    }

    &:active {
      transform: translateY(0);
      box-shadow: 0 2px 5px rgba(var(--primary-color-rgb), 0.3);
    }
  }
}

/* 弹幕容器 */
.danmaku-container {
  position: fixed;
  top: 64px; /* 设置一个顶部距离，避开菜单区域 */
  left: 0;
  width: 100%;
  height: calc(100% - 64px); /* 调整高度 */
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

/* 弹幕动画样式调整 */
@keyframes danmaku-move {
  from {
    transform: translateX(100vw);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  to {
    transform: translateX(-150vw);
    opacity: 0;
  }
}

.danmaku-item {
  position: absolute;
  white-space: nowrap;
  left: 0;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: 'LXGW WenKai', 'Ma Shan Zheng', sans-serif;
  font-size: 0.9rem;
  animation-name: danmaku-move;
  animation-timing-function: linear; /* 匀速滚动 */
  animation-fill-mode: forwards;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 52;
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  pointer-events: auto; /* 使弹幕可以接收鼠标事件 */

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
    z-index: 53;
  }

  .danmaku-content {
    flex: 1;
  }

  .danmaku-actions {
    display: flex;
    gap: 8px;
    margin-left: 8px;

    .danmaku-action {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: var(--primary-color);
        color: white;
        transform: scale(1.1);
      }

      &.like:hover {
        color: #f44336;
        background: #ffebee;
      }

      &.reply:hover {
        color: #2196f3;
        background: #e3f2fd;
      }

      svg {
        transition: all 0.2s ease;
      }
    }
  }
}

/* 弹幕开关按钮 */
.danmaku-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: white;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.1);

  &.card-top {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border: none;
    color: white;
    z-index: 1;

    &.danmaku-off {
      background: #e57373;

      &:hover {
        background: #ef5350;
      }

      .toggle-icon {
        color: white;
      }
    }

    .toggle-icon {
      color: white;
      opacity: 1;

      &.active {
        animation: pulse 1.5s infinite;
      }
    }

    &:hover {
      transform: translateX(-50%) scale(1.1);
      box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.3);
      background: var(--primary-color);
    }
  }

  .toggle-icon {
    display: inline-flex;
    opacity: 1;
    transition: all 0.2s ease;
    color: var(--primary-color);

    svg line {
      stroke: white;
    }
  }

  &:hover {
    background-color: rgba(var(--primary-color-rgb), 0.05);
    box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.15);
    transform: scale(1.05);

    .toggle-icon {
      opacity: 1;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 留言墙网格布局 */
.message-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定为3列 */
  gap: 1.5rem;
  width: 100%;
}

/* 留言墙容器 */
.message-wall-container {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 2rem;
  padding: 0 50px; /* 添加内边距，为翻页按钮提供空间 */
}

.message-wall {
  flex: 1;
  position: relative;
  min-height: 300px;
  padding: 0.5rem;
}

/* 便签样式 - 优化适应三列布局 */
.sticky-note {
  position: relative;
  border-radius: 4px;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.1),
    0 3px 6px rgba(0, 0, 0, 0.15);
  transition:
    all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.2s ease;
  overflow: visible;
  background-color: #fff59d;
  padding: 1.5rem 1.25rem 1.25rem;
  min-height: 180px;
  height: 100%;
  cursor: pointer;
  transform-origin: center;
  transform: rotate(var(--rotation, 0deg));

  &.message-note {
    --rotation: attr(data-rotation);
  }

  &:hover {
    box-shadow:
      0 10px 20px rgba(0, 0, 0, 0.12),
      0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px) scale(1.02) rotate(calc(var(--rotation, 0deg) * 1.05)) !important;
    z-index: 2;
  }

  &.form-note {
    max-width: 100%;
    width: 500px;
    box-shadow:
      0 10px 25px rgba(0, 0, 0, 0.15),
      0 5px 10px rgba(0, 0, 0, 0.12);
    z-index: 101;
  }

  &.highlighted {
    z-index: 3;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.15),
      0 6px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-8px) scale(1.03) rotate(0deg) !important;
    border: 2px solid var(--primary-color);
  }
}

/* 便签装饰元素 - 优化 */
.note-tape {
  position: absolute;
  width: 40%;
  height: 14px;
  top: -7px;
  left: 30%;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transform: rotate(-1deg);
  opacity: 0.8;
  transition: all 0.3s ease;

  .sticky-note:hover & {
    width: 45%;
    left: 27.5%;
    opacity: 1;
  }
}

.note-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f44336, #d32f2f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;

  &::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
  }

  .sticky-note:hover & {
    transform: scale(1.2) rotate(15deg);
  }
}

/* 便签内容样式 - 优化文字排版 */
.note-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;

  .note-author {
    font-weight: 700;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'LXGW WenKai', 'Ma Shan Zheng', sans-serif;
    margin-right: 0.5rem;
    word-break: break-word;
  }

  .note-date {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
  }

  input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-size: 0.9rem;

    &:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
    }

    &::placeholder {
      color: rgba(0, 0, 0, 0.4);
    }
  }
}

.note-body {
  flex: 1;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: hidden;
  word-break: break-word;
  font-family: 'LXGW WenKai', 'Klee One', 'Indie Flower', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;

  textarea {
    width: 100%;
    height: 150px;
    padding: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    resize: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;

    &:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
    }

    &::placeholder {
      color: rgba(0, 0, 0, 0.4);
    }
  }
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .note-mood {
    font-size: 1.25rem;
  }

  .note-actions {
    display: flex;
    gap: 0.75rem;

    .like-btn,
    .reply-btn {
      cursor: pointer;
      font-size: 0.85rem;
      opacity: 0.7;
      transition: all 0.2s;
      user-select: none;

      &:hover {
        opacity: 1;
        transform: scale(1.1);
      }

      &.liked {
        opacity: 1;
        color: #e53935;
      }
    }
  }

  .mood-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .mood-options {
      display: flex;
      gap: 0.25rem;

      span {
        cursor: pointer;
        font-size: 1.1rem;
        opacity: 0.7;
        transition: all 0.2s;
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;

        &:hover,
        &.active {
          opacity: 1;
          transform: scale(1.15);
          background-color: rgba(0, 0, 0, 0.05);
        }

        &.active {
          box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.5);
        }
      }
    }
  }

  .submit-btn {
    padding: 0.5rem 1.25rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: var(--primary-color-dark);
      transform: translateY(-2px);
      box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.3);
    }

    &:active {
      transform: translateY(0);
    }

    &:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
  }
}

/* 表单关闭按钮 */
.form-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  transition: all 0.2s;
  border-radius: 50%;

  &:hover {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.05);
  }
}

/* 字数统计 */
.char-counter {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.4);
}

/* 翻页按钮 */
.page-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.2s;
  color: var(--primary-color);

  &.prev {
    left: -50px; /* 增加左侧距离，避免重叠 */
  }

  &.next {
    right: -50px; /* 增加右侧距离，避免重叠 */
  }

  &:hover {
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.15);
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-50%) scale(1.1);
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      background-color: white;
      color: var(--primary-color);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transform: translateY(-50%);
    }
  }
}

/* 页码指示器 */
.page-indicator-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;

  .page-indicator {
    background-color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
  }
}

/* 留言便签淡入淡出过渡 */
.fade-enter-active,
.fade-leave-active {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

/* 回复侧边栏样式 */
.reply-sidebar {
  position: fixed;
  top: 64px; /* 设置一个顶部距离，避开菜单区域 */
  right: 0;
  width: 380px;
  height: calc(100vh - 64px); /* 调整高度 */
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.02);
  z-index: 90; /* 确保侧边栏在遮罩层之上 */
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(0, 0, 0, 0.03);

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.03);
    z-index: 2;
  }

  .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(12px);

    h3 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--primary-color, #3eaf7c);
      letter-spacing: 0.02em;
    }

    .close-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      border-radius: 50%;
      transition: all 0.2s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
        color: #333;
      }
    }
  }

  .original-message {
    margin: 1rem 1.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);

    .note-author {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 0.5rem;
      color: rgba(0, 0, 0, 0.85);
    }

    .note-content {
      font-size: 0.9375rem;
      line-height: 1.6;
      margin-bottom: 0.5rem;
      color: rgba(0, 0, 0, 0.75);
    }

    .note-date {
      font-size: 0.75rem;
      color: rgba(0, 0, 0, 0.5);
      text-align: right;
    }
  }

  .replies-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem;

    h4 {
      margin: 1rem 0;
      font-size: 0.9375rem;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.6);
    }

    .reply-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .reply-item {
        padding: 0.75rem 1rem;
        background-color: rgba(249, 249, 249, 0.8);
        border-radius: 0.75rem;
        border-left: 3px solid rgba(0, 0, 0, 0.03);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
        transition: all 0.2s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
        }

        .reply-author {
          font-weight: 600;
          font-size: 0.875rem;
          margin-bottom: 0.375rem;
          color: rgba(0, 0, 0, 0.85);
        }

        .reply-content {
          font-size: 0.9375rem;
          line-height: 1.5;
          margin-bottom: 0.5rem;
          color: rgba(0, 0, 0, 0.75);
        }

        .reply-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.75rem;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }

  .no-replies {
    padding: 2rem 1.5rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.9375rem;
    font-style: italic;
  }

  .reply-form {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);

    .form-header {
      margin-bottom: 0.75rem;

      input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0.5rem;
        font-size: 0.875rem;
        background-color: rgba(255, 255, 255, 0.8);
        transition: all 0.2s ease;

        &:focus {
          outline: none;
          border-color: var(--primary-color, #3eaf7c);
          box-shadow: 0 0 0 3px rgba(62, 175, 124, 0.1);
          background-color: #fff;
        }
      }
    }

    .form-body {
      position: relative;
      margin-bottom: 0.75rem;

      textarea {
        width: 100%;
        height: 100px;
        padding: 0.75rem;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0.5rem;
        resize: none;
        font-size: 0.875rem;
        line-height: 1.5;
        background-color: rgba(255, 255, 255, 0.8);
        transition: all 0.2s ease;

        &:focus {
          outline: none;
          border-color: var(--primary-color, #3eaf7c);
          box-shadow: 0 0 0 3px rgba(62, 175, 124, 0.1);
          background-color: #fff;
        }
      }

      .char-counter {
        position: absolute;
        right: 0.5rem;
        bottom: 0.5rem;
        font-size: 0.75rem;
        color: rgba(0, 0, 0, 0.4);
      }
    }

    .form-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .mood-selector {
        display: flex;
        gap: 0.375rem;

        span {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 1.75rem;
          height: 1.75rem;
          border-radius: 50%;
          cursor: pointer;
          font-size: 1rem;
          background-color: rgba(255, 255, 255, 0.8);
          transition: all 0.2s;

          &:hover,
          &.active {
            background-color: rgba(62, 175, 124, 0.1);
            transform: scale(1.1);
          }

          &.active {
            box-shadow: 0 0 0 2px var(--primary-color, #3eaf7c);
          }
        }
      }

      .submit-reply-btn {
        padding: 0.5rem 1.25rem;
        background-color: var(--primary-color, #3eaf7c);
        border: none;
        border-radius: 0.5rem;
        color: white;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: var(--primary-color-dark, #2c855d);
          box-shadow: 0 2px 6px rgba(62, 175, 124, 0.3);
          transform: translateY(-2px);
        }

        &:active {
          transform: translateY(0);
        }

        &:disabled {
          background-color: rgba(0, 0, 0, 0.2);
          cursor: not-allowed;
          box-shadow: none;
          transform: none;
        }
      }
    }
  }
}

/* 侧边栏遮罩层 */
.sidebar-overlay {
  position: fixed;
  top: 64px; /* 从顶部菜单下方开始 */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 89; /* 降低z-index，使其不影响顶部菜单 */
  backdrop-filter: blur(4px);
}

/* 回复侧边栏动画 */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease;
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
}

/* 修改留言表单弹窗样式 */
.message-form-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  padding: 1rem;
  max-width: 90%;
  width: 500px;
}

/* 留言墙响应式调整 */
@media (max-width: 768px) {
  .message-wall-container {
    padding: 0 20px;
  }

  .page-nav-btn {
    &.prev {
      left: -10px;
    }

    &.next {
      right: -10px;
    }
  }

  .message-grid {
    grid-template-columns: repeat(2, 1fr); /* 中等屏幕显示两列 */
  }

  .reply-sidebar {
    width: 90%;
    max-width: 350px;
  }
}

@media (max-width: 480px) {
  .add-message-container {
    flex-direction: column;
    gap: 0.75rem;
  }

  .title-paper {
    padding: 1rem 2rem !important;

    .page-title {
      font-size: 2rem !important;
    }

    .page-subtitle {
      font-size: 1rem !important;
    }
  }

  .message-grid {
    grid-template-columns: 1fr; /* 小屏幕显示一列 */
  }

  .reply-sidebar {
    width: 100%;
    max-width: none;
  }
}
</style>
